<!--
 * @Description: 主页
 * @Author: hsy
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: LAPTOP-JN5U4VA6
 * @LastEditTime: 2021-08-08 17:26:24
-->
<template>
<div class="home">
    <!-- 头部 -->
    <Header></Header>
    <!-- /头部 -->
    <!-- 体部 -->
    <div class="content">
      <!-- 轮播图 -->
      <div class="carousel">
        <el-carousel height="500px">
          <el-carousel-item v-for="item in carousels.slice(0,4)" :key="item.id">
            <img :src="item.url" alt="">
          </el-carousel-item>
        </el-carousel>
      </div>
      <!--/轮播图 -->
      <!-- 板块 -->
      <div class="wrapper" style="min-height:400px" v-loading="loading">
        <div class="plates">
           <!-- 需要从categoryArticles中拿取具体的文章的题目  -->
          <div class="plate"  v-for="cas in categoryArticles" :key="cas.category.id" >
            <div class="head">
              <div class="title">{{cas.category.name}}</div>
              <div class="more" @click="toListHandler(cas.category)">更多&gt;&gt;</div>
            </div>
            <ul class="list"> 
              <!-- 从article中遍历文章内容  点击title可以跳转到对应的文章页面 -->
              <li v-for="a in cas.aritcle" @click="toArticleHandler(a)" :key="a.id">
                <!-- cover 表示文章中的封面图片 -->
                <img :src="a.cover" alt="">
                {{a.title}}
              </li>
            </ul>
          </div>
        </div>
        <!-- 图标 -->
        <div class="bt">
          <div class="quick">
            <div class="access">快捷通道
              <span class="morequick" onclick="window.open('http://grs.sxau.edu.cn/')">更多></span>
            </div>
            
          </div>
           
          <div class="kjtd"> 
            <div class="bj">
              <!-- 点击跳转 -->
              <!-- 研究生信息系统 教师端 -->
              <div class="jsd" align="center" onclick="window.open('http://211.82.8.57:81/g_server/framework/login_admin.aspx')">
                <img src="/resources/i01.png" alt="哈哈哈哈哈哈哈哈">
                <div class="wz1">
                  <ul>研究生信息系统</ul>
                <ul>(新版教师端)</ul>
                </div>
              </div>
              <!-- 研究生信息系统 学生端 -->
              <div class="xsd" align="center" onclick="window.open('http://211.82.8.57:81/g_client/framework/login_admin.aspx')">
                <img src="/resources/i02.png" alt="哈哈哈哈哈哈哈哈哈哈">
                <div class="wz2">
                  <ul>研究生信息系统</ul>
                <ul>(新版学生端)</ul></div>
              </div>
              <!-- 规章制度 -->
              <div class="gzzd" align="center" onclick="window.open('http://grs.sxau.edu.cn/jgjj/gzzd.htm')">
                <img src="/resources/i03.png" alt="哈哈哈哈哈哈哈哈哈哈哈">
                <div class="wz3">
                  <ul>规章制度</ul>
              </div>
              </div>
              <!-- 培养方案 -->
              <div class="py" align="center" onclick="window.open('http://grs.sxau.edu.cn/pygz/pyfa.htm')">
                <img src="/resources/i04.png" alt="哈哈哈哈哈哈哈哈哈哈哈哈">
                <div class="wz4">
                  <ul>培养方案</ul>
                </div>
              </div>
              <!-- 导师查询 -->
              <div class="dscx" align="center" onclick="window.open('http://grs.sxau.edu.cn/dsfc.htm')">
                <img src="/resources/i05.png" alt="hhhhhhhhhhhh">
                <div class="wz5">
                  <ul>导师查询</ul>
              </div>
              </div>
              <!-- 服务指南 -->
              <div class="fwzn" align="center" onclick="window.open('http://grs.sxau.edu.cn/index/bszn.htm')">
                <img src="/resources/i06.png" alt="哈哈哈哈哈哈哈哈哈哈哈">
                <div class="wz6">
                  <ul>服务指南</ul>
                </div>
              </div> 
            </div>
          </div>
        </div>
        <!-- /图标 -->

        <!-- 下部  板块内容 -->
        <div class="plates">
          <div class="plate_b" v-for="cas in categoryArticles_b" :key="cas.category.id" >
            <div class="head">
              <div class="title">{{cas.category.name}}</div>
              <div class="more" @click="toListHandler(cas.category)">更多&gt;&gt;</div>
            </div>
            <!-- 轮播图 -->
            <div class="carousel_b">
              <!-- indicator-position="outside"   设置走马灯下的指示条 -->
              <el-carousel height="280px" indicator-position="none">
                <el-carousel-item v-for="a in cas.aritcle" :key="a.id"  >
                  <div>
                    <img :src="a.cover" alt="">
                    <div>
                      <div class="c_title" @click="toArticleHandler(a)">{{a.title}}</div>
                      <div class="c_content" v-html="a.content" @click="toArticleHandler(a)"></div>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
            <!--/轮播图 -->
          </div>
        </div>
        <!-- /下部   板块内容 -->

      </div>
      <!-- /板块 -->
    </div>
    <!-- /体部 -->
    
    <!-- 底部 -->
    <Footer></Footer>
    <!-- /底部 -->
  </div>
</template>
<script>
import {get} from '../utils/request'
import Header from './components/Head'
import Footer from './components/Foot'
export default {
  // 4. 局部组件注册
  components:{
    Header,
    Footer
  },
  // 1. 数据
  data(){
    return {
      carousels:[],
      loading:false,
      // 由一级栏目找到文章
      categoryArticles:[],
      categoryArticles_b:[],


    }
  },
  // 2. 生命周期钩子函数 - 在vue的生命周期各个阶段会执行的代码
  created(){
    this.loadCarousels();
    // loadCategoryTopArticles从一级栏目中获取文章内容
    // this.loadCategoryTopArticles();
    this.loadCategoryArticles();
    
  },
  // 3. 方法，一般用来定义方法或者事件处理函数
  methods:{
    // 跳转
    toListHandler(category){
      // 跳转 router  路由跳转   路径在router  index.js中
      this.$router.push({
        path:'/list',
        query:category
      })
    },
    toArticleHandler(article){
      this.$router.push({
        path:'/article',
        query:{
          id:article.id,
          name:article.category?article.category.name:''
        }
      })
    },
    // 加载轮播图数据
    loadCarousels(){
      let url = '/index/carousel/findAll'
      get(url).then(resp => {
        this.carousels = resp.data;
        this.carousels_b = resp.data;
      })
    },

    // loadCategoryTopArticles由一级标题获取栏目咨询
    /*
    loadCategoryTopArticles(){
      this.loading = true;
      let url = "/index/article/findTopCategoryArticles"
      //let url = "/index/article/findCategoryArticles"
      get(url).then( resp => {
        this.categoryTopArticles = resp.data.slice(20,23);
        this.loading = false;
      })
    },
    */
    //查询栏目咨询 
    loadCategoryArticles(){
      this.loading = true;
      let url = "/index/article/findCategoryArticles"
      get(url).then( resp => {
        this.categoryArticles = resp.data.slice(41,44);
        this.categoryArticles_b = resp.data.slice(44,46);
        this.loading = false;
      })
    },

  }
}
</script>
<style lang="scss" scoped>
// 变量
$color_primary:#725007;

.home {
  // 内容样式
  .content {
    background-color: #b39858;
    /*********  轮播图********* */ 
    .carousel {
      img {
        width:100%;
        height: 100%;
      }
    }
    /*********  /轮播图********* */ 
    .plates::after {
      content:"";
      display: block;
      clear: both;
    }
    .plates {
      padding:.5em 0;
      //板块内容
      .plate {
        box-sizing: border-box;
        float: left;
        width: 32.5%;
        height: 350px;
        background-color: #fff;
        padding: .5em;
        margin-right: 1.25%;
        margin-bottom: .5em;
        .head {
          display: flex;
          justify-content: space-between;
          .title {
            font-size: 18px;
            font-weight: bold;
            color: $color_primary;

            // 新增
            padding-left: 4px;
            padding-bottom: 5px;
            border-left: #8c6301 4px solid;
            // border-bottom: #8c6301 1px solid;
          }
          .more {
            color: #999;
            font-size: 12px;
            cursor: pointer;
          }
          
        }
        ul.list {
          li {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 2em;
            cursor: pointer;
            color: $color_primary;
            margin-top: 5px;
            font-size: 16px;
          }
          
          // 新增  添加上方线条
          li:nth-child(1){
            border-top: #8c6301 1px solid;
          }
          li:hover {
            color: #473303 ;
          }
        }
      }
      // 第一个板块   
      .plate:nth-child(1){
        li::before{
          content: '通知';
          color: beige;
          background-color: #b39858;
          padding: 4px;
          border-radius: 3px;
        }
      }
      // 第二个板块   
      .plate:nth-child(2){
        li::before{
          content: '动态';
          color: beige;
          background-color: #b39858;
          padding: 4px;
          border-radius: 3px;
        }
      }
      // 第三个板块
      .plate:nth-child(3){
        margin-right: 0;
        // 第三个遍历plate中  列表图片显示
        img{
          width: 250px;
          height: 250px;
          display: block;
          margin-left: 19%;
          margin-top: 12px;
          margin-bottom: 12px;
        }
        img:hover{
            transform: scale(1.1, 1.1);
          }
        li{
          
          text-align: center;
        }
      }

      // 下半部分板块样式
      .plate_b {
        box-sizing: border-box;
        float: left;
        width: 48.7%;
        height: 350px;
        background-color: #fff;
        padding: .5em;
        margin-right: 1.25%;
        margin-bottom: .5em;
        .head {
          display: flex;
          justify-content: space-between;
          border-bottom: solid 1px $color_primary;
          .title {
            font-size: 18px;
            font-weight: bold;
            color: $color_primary;

            // 新增
            padding-left: 4px;
            padding-bottom: 5px;
            border-left: #8c6301 4px solid;
            // border-bottom: #8c6301 1px solid;
          }
          .more {
            color: #999;
            font-size: 12px;
            cursor: pointer;
          }
        }
        // 下方轮播样式
        .carousel_b{
          margin-top: 15px;
          text-align: center;
          img {
            float: left;
            width: 40%;
            height: 280px;
            cursor: pointer;
            padding-right: 1em;
          }
          img:hover{
            transform: scale(1.1, 1.1);
          }
          .c_title{
            font-size: 18px;
          }
          .c_title:hover{
            color: #8c6301;
            cursor: pointer;
          }
          .c_content{
            padding-right: 1em;
            font-size: 13px;
            color: #999;
            text-overflow: ellipsis;
            line-height: 2em;
          }
          .c_content:hover{
            color: #8c6301;
            cursor: pointer;
          }
        }
      }

    }
/***********plats  /板块内容************/
    // 图标样式
    .kjtd{
      width:97.7%;
      color: #362c13;
    }
    // 快捷通道
    .quick{
      border-bottom: #725007 2px solid;
      width: 97.5%;
      .access{
        list-style: none;
        font-size: 19px;
        font-weight: bold;
        color: $color_primary;

        padding-left: 4px;
        padding-bottom: 5px;
        border-left: #8c6301 4px solid;
      }
      .morequick{
        color: $color_primary;
        padding-left: 1100px;
        font-size: 13px;
      }
      
    }
    // 单个图标的样式
    .bj{
      /*使每个div横向且均匀分布 */
      width: 100%;
      height: 180px;
      /*文字div的宽高且居中 */
      .wz{
        height: 30px;
        width: 100px;
        text-align:center;
      }
      /*文字颜色 */
      .bj ul{
        color: $color_primary;
      }
      /*教师端div的宽高和显示效果 */
      .jsd{
        width: 100px;
        height: 80px;
        text-align: center;
        float: left;
        padding: 50px;
      }
      /*学生端div的宽高和显示效果 */
      .xsd{
        width: 100px;
        height: 80px;
        text-align: center;
        float: left;
        padding: 50px;

      }
      /*规章制度div的宽高和显示效果 */
      .gzzd{
        width: 100px;
        height: 80px;
        text-align: center;
        float: left;
        padding: 50px;

      }
      /*培养方案div的宽高和显示效果 */
      .py{
        width: 100px;
        height: 80px;
        text-align: center;
        float: left;
        padding: 50px;

        // margin-left: 50px;
      }
      /*导师查询div的宽高和显示效果 */
      .dscx{
        width: 100px;
        height: 80px;
        text-align: center;
        float: left;
        padding: 50px;

      }
      /*服务指南div的宽高和显示效果 */
      .fwzn{
          width: 100px;
        height: 80px;
        text-align: center;
        float: left;
        padding: 50px;

      }
      
      /*设置合适的距离大小 */
      .bj>div{
          width: 100px;
          height: 80px;
          margin-right: 170px;
          float: left;
      }
      // .bj>div:nth-child(6){
      //     margin-right: 0;
      // }
      /*鼠标触摸，改变颜色效果*/
      .xsd:hover,.jsd:hover,.gzzd:hover,.py:hover,.dscx:hover,.fwzn:hover{
        background-color: rgb(190, 127, 10);
      }
    }
  } 
}
</style>
